<template>
  <el-container>
       <el-header>
      <span class="siteIcon" style="font-size: 24px; color: #e9eef3">
        <img :src="logo" @click="returnlink" style="height: 70px" />
      </span>
      <span class="return">
        <el-button
          type="text"
          @click="returnlink"
          style="font-size: 24px; color: #e9eef3"
          >回到首页</el-button
        >
      </span>
      <el-dropdown class="cyr-drop" v-if="this.$store.getters.isLogin==true||this.$store.getters.isLogin=='true'">
        <span class="el-dropdown-link">
            <span
            class="span4"
            style="
              width: 100px;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              white-space: normal;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              float: right;
              font-weight:600;">
            {{ $store.getters.userName }}
          </span>
          <div class="span4" style="float: right;font-weight:600;">您好,</div>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="returnmydoor">我的门户</el-dropdown-item>
            <el-dropdown-item divided @click="returnperinfo"
              >账户信息</el-dropdown-item
            >
            <el-dropdown-item divided @click="returnout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button
        class="login"
        type="text"
        @click="login"
        style="font-size: 24px; color: #e9eef3;font-weight:600;"
        v-else
        >登录</el-button
      >
    </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import {Edit} from "@element-plus/icons";
import logo from "../assets/no_border.png";
export default defineComponent({
  setup() {
    const state = reactive({
      logo,
      Edit
    });
    return {
      ...toRefs(state),
    };
  },
  methods: {
    returnmydoor() {
      if (this.$store.state.own_door == true||this.$store.state.own_door == "true") {
        if (this.$store.state.isCompany == true||this.$store.state.isCompany == "true") {
          this.$router.push("/mycompanydoor");
        } else this.$router.push("/mydoortrue");
      } else this.$router.push("/mydoorfalse");
    },
    returnperinfo() {
      this.$router.push("/personalcenterforsee");
    },
    returnout() {
      this.$router.push("/");
      this.$store.commit("updateown_door", false);
      this.$store.commit("updateUserName", "");
      this.$store.commit("updateUserID", "");
      this.$store.commit("updateUserEmail", "");
      this.$store.commit("updateCTA", "");
      this.$store.commit("updateMPID", "");
      this.$store.commit("updatePID", "");
      this.$store.commit("updateIsLogin", false);
    },
    returnlink() {
      this.$router.push("/");
    },
    login(){
      this.$router.push("/login");
    },
  },
});
</script>


<style scoped>
.el-header {
  background-color: #1047b4;
  color: #1047b4;
  text-align: center;
  line-height: 60px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-button--text {
  border-color: transparent;
  color: var(--el-color-primary);
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
  font-weight: 600;
}
.siteIcon {
  position: absolute;
  left: 100px;
  top: -5px;
  color: #e9eef3;
}
.return {
  position: absolute;
  left: 200px;
  top: 2px;
  color: #e9eef3;
  /* font-weight: 700; */
}
.login {
  position: absolute;
  right: 120px;
  top: 2px;
  color: #e9eef3;
  /* font-weight: 700; */
}
.el-dropdown {
  position: absolute;
  left: 1200px;
  color: #e9eef3;
  font-size: 22px;
  font-weight: 400;
  line-height: 60px;
}
</style>